<!--
 * @Author: your name
 * @Date: 2021-04-06 15:42:56
 * @LastEditTime: 2021-04-06 16:18:58
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /Interview Files/大纲/1102AJAX.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实现AJAX</title>
</head>

<body>

</body>

</html>
<script>
    function ajax(options) {
        var xhr = null;
        var params = formsParams(options.data);
        //创建对象
        if (window.XMLHttpRequest) {
            xhr = new XMLHttpRequest()
        } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 连接
        if (options.type == "GET") {
            xhr.open(options.type, options.url + "?" + params, options.async);
            xhr.send(null)
        } else if (options.type == "POST") {
            xhr.open(options.type, options.url, options.async);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(params);
        }
        xhr.onreadystatechange = function() {
            if (xhr.readyState == 4 && xhr.status == 200) {
                options.success(xhr.responseText);
            }
        }

        function formsParams(data) {
            var arr = [];
            for (var prop in data) {
                arr.push(prop + "=" + data[prop]);
            }
            return arr.join("&");
        }

    };

    ajax({
        url: "a.php", // url---->地址
        type: "POST", // type ---> 请求方式
        async: true, // async----> 同步：false，异步：true 
        data: { //传入信息
            name: "张三",
            age: 18
        },
        success: function(data) { //返回接受信息
            console.log(data);
        }
    })
</script>